<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div class="app">
        <h1>
            组件总结
        </h1>
        <p>
            Vue中使用组件的三大步骤:
               1、定义组件(创建组件)
               2、注册组件
               3、使用组件(写组件标签)

            一、如何定义一个组件?
                使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options儿乎一样，区别如下:
                1.el不要写，为什么?- 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
                2.data必须写成函数，为什么?-避免组件被复用时，数据存在引用关系。
                备注:使用template可以配置组件结构。
            
            二、如何注册组件?
                1.局部注册:靠new Vue的时候传入components选项
                2.全局注册:靠Vue.component('组件名'组件)

            
            三、编写组件标签:
                <school></school>
                
        </p>

       <school></school>

    </div>
</body>
<script>
    Vue.config.productionTip = false;
    // 创建组件1
    const school=Vue.extend({
        template:`
            <div>
                <h3>学校名称：{{schoolName}}</h3>
                <h3>地址：{{address}}</h3>
            </div>`
        
        ,
    
        data(){
            return {
                schoolName:'北京大学',
                address:"哈哈"
            }
        }
    });
    //创建组件2
    const student=Vue.extend({
        template:`
            <div>
                <hr/>
                <h1>{{name}}</h1>
                <h1>{{age}}</h1>
            </div>
        `,
        
        data() {
            
            return {
                name:'张三',
                age:18
            }
        },
    });

    //创建vm
    new Vue({
        el:'.app',
        //注册组件
        components:{
            school:school,
            student:student
        }
    });
</script>
</html>